<template>
  <div style="background-color: #FFFFFF; width: 100%; height: 100%; padding: 15px;">
    <div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
      <span>电耗明细</span>
    </div>
    <div style="margin-left: 20px;margin-top: 20px; padding:5px">
      <a-row :gutter="16">
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择公司"
            v-model="selectQuery.company"
            dictCode="crm_company,name,id"
            disabled
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择车间"
            v-model="selectQuery.workshop"
            dictCode="workshop"
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择工序"
            v-model="selectQuery.productCategory"
            dictCode="product_category"
          />
        </a-col>

        <a-col :span="6">
          <a-select
            style="width: 100%"
            placeholder="请选择机台"
            v-model="selectQuery.deviceNo"
            :key="selectQuery.productCategory"
          >
            <a-select-option v-for="(item,index) in deviceList"  :key="index" :value="item.deviceNo">
              {{ item.workingProcedure_dictText }}{{ item.deviceNo }}
            </a-select-option>
          </a-select>
        </a-col>

        <a-col :span="14">
          <RangePicker v-model="queryTime" @change="onChange"></RangePicker>
        </a-col>

        <a-col :span="2">
          <a-button @click="onSearch" type="primary" style="margin-top: 10px">
            查询
          </a-button>
        </a-col>
      </a-row>
      <div style="display: flex;margin-top: 30px; ">
        <a-tag>
          <a-statistic title="总耗电量(kw·h)" :value="statisticsData.consumption" style="margin-right: 50px" />
        </a-tag>
        <a-tag>
          <a-statistic title="平均电流(A)" :value="statisticsData.electricCurrent" style="margin-right: 50px" />
        </a-tag>
        <a-tag>
          <a-statistic title="平均电压(V)" :value="statisticsData.electricVoltage" style="margin-right: 50px" />
        </a-tag>
      </div>
      <div style="margin-top: 30px;">
        <a-table
          :columns="columns"
          :data-source="data"
          :scroll="{ y: 400 }"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <a slot="name" slot-scope="text, record">{{ text }}</a>
        </a-table>
      </div>
      <!--      @click="edit(record)-->
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: '公司',
    dataIndex: 'company_dictText',
    key: 'company_dictText',
    align: 'center',
    width: 220
  },
  {
    title: '车间',
    dataIndex: 'workshop_dictText',
    key: 'workshop_dictText',
    align: 'center',
	width: 100
  },
  {
    title: '工序',
    dataIndex: 'productCategory_dictText',
    key: 'productCategory_dictText',
    align: 'center',
	width: 100
  },
  {
    title: '设备编号',
    dataIndex: 'deviceNo',
    key: 'deviceNo',
    align: 'center',
    ellipsis: true
  },

  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
    width: 180
  },
  {
    title: '电耗(kw·h)',
    dataIndex: 'consumption',
    key: 'consumption',
    align: 'center',
    width: 100
  },
  {
    title: '电流(A)',
    dataIndex: 'electricCurrent',
    key: 'electricCurrent',
    align: 'center',
    width: 100
  },
  {
    title: '电压(V)',
    dataIndex: 'electricVoltage',
    key: 'electricVoltage',
    align: 'center',
    width: 100
  }
]

import { getAction } from '@/api/manage'

import RangePicker from '@/components/RangePicker/RangePicker.vue'

export default {
  components: { RangePicker },
  data() {
    return {
      queryTime: null,
      data: [],
      columns,
      statisticsData: { consumption: 0, electricVoltage: 0, electricCurrent: 0 },
      // 查询条件
      selectQuery: {
        // 公司
        company: '1771136798305476610',
        // 车间
        workshop: undefined,
        // 工序
        productCategory: undefined,
        // 机台号
        deviceNo: undefined,
        // 开始时间
        startTime: undefined,
        // 结束时间
        endTime: undefined,
        pageSize: 10,
        pageNo: 1
      },
      gxOption1: [],
      // 设备机台
      deviceList: [],
      // 显示工序和机台的对应关系
      /*
      * productCategory（细纱1；粗纱2；头并4；末并5；梳棉6；抓棉7；多仓8；精开棉9；络筒10；打包11）
        workingProcedure（清花1；梳棉2；并条4；粗纱5；细纱6；络筒7；打包8；）
        清花对应：抓棉、多仓、精开棉；并条对应：头并、末并
      * */
      workingProcedure: {
        // 细纱1 -> 细纱6
        1: 6,
        // 粗纱2 -> 粗纱5
        2: 5,
        // 抓棉7 -> 清花1
        7: 1,
        // 多仓8 -> 清花1
        8: 1,
        // 精开棉9 -> 清花1
        9: 1,
        // 头并4 -> 并条4
        4: 4,
        //末并5 -> 并条4
        5: 4,
        // 梳棉6  -> 梳棉2
        6: 2,
        // 络筒10  -> 络筒7
        10: 2,
        // 打包11 -> 打包8
        11: 8
      },
      // 分页配置
      pagination: { pageSize: 10 }
    }
  },
  watch: {
    'selectQuery.workshop'() {
      this.getDeviceList()
    },
    'selectQuery.productCategory'() {
      this.getDeviceList()
    },
    selectQuery: {
      handler() {
        const data = Object.keys(this.selectQuery)
        for (let i = 0; i < data.length; i++) {
          if (!this.selectQuery[data[i]]) {
            return
          }
        }
        this.onSearch()
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    getDeviceList() {
      this.selectQuery.deviceNo = undefined
      this.deviceList = []
      // 车间和工序都选才去查询
      if (!this.selectQuery.workshop || !this.selectQuery.productCategory) {
        return
      }
      const params = {
        workshop: this.selectQuery.workshop,
        workingProcedure: this.workingProcedure[this.selectQuery.productCategory],
        pageSize: -1
      }
      getAction('/crm_device/crmDevice/list', params).then(res => {
        const { records } = res.result
        this.deviceList = records
      })
    },

    onSearch() {
      const data = Object.keys(this.selectQuery)
      /*   for (let i = 0; i < data.length; i++) {
        if (!this.selectQuery[data[i]]) {
          this.$message.warning('请选择完整的查询条件')
          return
        }
      }*/
      getAction(
        '/zjc_consumption/zjcConsumption/energyManageElectricityConsumptionDetailsTotal',
        this.selectQuery
      ).then(res => {
        this.statisticsData = res.result
        console.log('电流折线图', res)
      })

      getAction('/zjc_consumption/zjcConsumption/energyManageElectricityConsumptionDetails', this.selectQuery).then(
        res => {
          const { total, records } = res.result
          this.data = records

          this.pagination = { ...this.pagination, total }
        }
      )
    },
    handleTableChange(pagination) {
      this.selectQuery.pageNo = pagination.current
      this.onSearch()
    },

    onChange() {
      console.log('改变了数据')
      this.selectQuery.startTime = this.queryTime[0]
      this.selectQuery.endTime = this.queryTime[1]
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-col-6 {
  width: 21.7%;
}
</style>
